<template>
  <template v-if="activities && activities.length>0">
    <el-timeline style="width:100%;margin: 12px auto;padding: 8px;">
      <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :type="activity.btn=='流程回退'||activity.btn=='退回修改'?'danger':'success'"
          size="large"
          hide-timestamp
      >
        <el-card>
          <h4>{{activity.nodeName}}：{{activity.createdAt}}</h4>
          <div style="margin-top: 5px;">
            <div>
              <span style="color: #999;">审批意见：</span>
              <span>{{activity.content}}</span>
            </div>
            <div>
              <span style="color: #999;">审批人：</span>
              <span>{{activity.approvalUser?.userNickname}}</span>
            </div>
            <div>
              <span style="color: #999;">审批操作：</span>
              <span>{{activity.btn}}</span>
            </div>
            <div v-if="activity.art && activity.art.length>0">
              <span style="color: #999;">附件：</span>
              <el-link v-for="(file,fi) in activity.art" :key="fi" :href="proxy.getUpFileUrl(file.url)" target="_blank" type="primary">{{file.name}}</el-link>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <pagination
        v-show="tableData.total>0"
        :total="tableData.total"
        v-model:page="tableData.param.pageNum"
        v-model:limit="tableData.param.pageSize"
        @pagination="getLogList"
        layout="prev, pager, next"
    />
  </template>
  <template v-else>
    <el-empty description="没有数据" />
  </template>
</template>

<script setup lang="ts">
  import {FlowLogData} from "/@/components/gFlow/model";
  import {checkLog} from "/@/api/flow/flowModel";
  import {getCurrentInstance, ref} from "vue";
  defineOptions({ name: "flowLog"})
  const {proxy} = <any>getCurrentInstance();
  const props = defineProps({
    formId:{
      type:Number,
      default:0
    },
    formTable:{
      type:String,
      default:''
    }
  })
  const tableData = ref({
    total:0,
    param:{
      formId:props.formId,
      formTable:props.formTable,
      pageNum: 1,
      pageSize: 10,
    }
  })
  const activities = ref<FlowLogData[]>()

  const getLogList = ()=>{
    checkLog(tableData.value.param).then((response:any)=>{
      activities.value = response.data.list
      tableData.value.total = response.data.total
    })
  }
  defineExpose({getLogList})
</script>
<style scoped lang="scss">

</style>
